<template>
  <view class="container">
    <view class="statistics">
      <view class="title flex">2024年12月31日</view>
      <view class="num-box">
        <view class="item">
          <view class="money-name">订单数</view>
          <view class="money">1000</view>
        </view>
        <view class="item">
          <view class="money-name">预估收益(元)</view>
          <view class="money">
            <text>￥</text>
            <text>1000.00</text>
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="title">
        <view>来源</view>
        <view>订单笔数</view>
        <view>预估收益</view>
      </view>
      <view>
        <view>淘宝</view>
        <view>12</view>
        <view>¥34.98</view>
      </view>
      <view>
        <view>淘宝</view>
        <view>12</view>
        <view>¥34.98</view>
      </view>
      <view>
        <view>淘宝</view>
        <view>12</view>
        <view>¥34.98</view>
      </view>
      <view>
        <view>淘宝</view>
        <view>12</view>
        <view>¥34.98</view>
      </view>
      <view>
        <view>淘宝</view>
        <view>12</view>
        <view>¥34.98</view>
      </view>
      <view>
        <view>淘宝</view>
        <view>12</view>
        <view>¥34.98</view>
      </view>
      <view>
        <view>淘宝</view>
        <view>12</view>
        <view>¥34.98</view>
      </view>
    </view>
  </view>
</template>

<script setup></script>

<style lang="scss" scoped>
.container {
  background: #f8f8f8;
  min-height: 100vh;
  padding: 12px 12px 20px;
  .money-name {
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
  }
  .money {
    color: #333;
    font-weight: 600;
    text {
      font-size: 12px;
      &:last-child {
        font-size: 18px;
      }
    }
  }
  .statistics {
    background-color: #ffffff;
    padding: 0 12px 12px;
    border-radius: 12px;
    .title {
      height: 44px;
      justify-content: space-between;
      color: #000;
      font-weight: 500;
      font-size: 16px;
    }
    .num-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      .item {
        border-radius: 8px;
        background: #ffeeee;
        padding: 12px;
        .money-name {
          margin-bottom: 6px;
        }
      }
    }
  }
  .list {
    margin-top: 12px;
    background: #fff;
    border-radius: 12px;
    > view {
      height: 44px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      text-align: center;
      line-height: 44px;
      color: #333;
      font-weight: 400;
      font-size: 12px;
      &.title {
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #e1e1e1;
        color: #666;
      }
      &:nth-child(odd):not(.title) {
        background: #fcfcfc;
      }
    }
  }
}
</style>
